<template>
  <div class="taiji" :style="{ width: diameter + 'px', height: diameter + 'px' }">
    <div class="half"></div>
    <div class="big big1"></div>
    <div class="big big2"></div>
    <div class="small small1"></div>
    <div class="small small2"></div>
  </div>
</template>
<script setup>
const props = defineProps({
  diameter: {
    type: String,
    defalut: []
  }
})
</script>
<style scoped lang="scss">
.taiji {
  background-color: white;
  position: relative;
  border-radius: 50%;
  overflow: hidden;

  .half {
    width: 50%;
    height: 100%;
    background-color: black;
  }

  .big {
    width: 50%;
    height: 50%;
    left: 25%;
    position: absolute;
    border-radius: 50%;
  }

  .big1 {
    top: 0;
    background-color: black;
  }

  .big2 {
    bottom: 0;
    background-color: white;
  }

  .small {
    width: 10%;
    height: 10%;
    left: 45%;
    position: absolute;
    border-radius: 50%;
  }

  .small1 {
    top: 20%;
    background-color: white;
  }

  .small2 {
    bottom: 20%;
    background-color: black;
  }
}
</style>
